<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSON Schema Viewer <!-- @echo version --></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
        <link rel="stylesheet" href="styles/json-schema-viewer<!-- @if NODE_ENV='PRODUCTION' -->.min<!-- @endif -->.css" />

    </head>
    <body>
        <div id="loading">
            <div id="preload"><img src="images/loader.gif" alt="Loading..."/>
                <br />
                Loading...
            </div>
        </div>
        <div class="ui-responsive-panel" data-role="page" id="viewer-page"  data-title="JSON Schema Viewer">
            <div data-role="header" class="md-navbar">
                <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
                    <a class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext" href="#info-panel" title="Toggle Info">Menu</a>
                    <a class="ui-btn md-flex-btn ui-corner-all ui-icon-check ui-btn-icon-left" href="#validator-page" title="Go to Validator">Validator</a>
                    <!--<a href="#" class="ui-btn ui-btn-icon-right ui-icon-plus ui-btn-icon-notext ui-corner-all">Zoom-in</a>
                    <a href="#" class="ui-btn ui-btn-icon-right ui-icon-minus ui-btn-icon-notext ui-corner-all">Zoom-out</a>-->

                </div>
                <h1 id="viewer-title">JSON Schema Viewer<span class="schema-version"></span></h1>
                <!-- <a class="ui-btn-right ui-btn ui-icon-info ui-btn-icon-notext ui-corner-all" href="#help-panel"  title="Toggle Help">Help</a> -->
                <a data-rel="popup" data-role="none" data-position-to="window" class="ui-btn-right main-logo" href="#popup-welcome"  title="Show Info"></a>
            </div><!-- /header -->
            <div  role="main" class="ui-content" id="main-body">
                <div id="zoom-controls">
                    <a id="zoom_in" href="#" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all" title="Zoom In">Zoom-in</a>
                    <a id="zoom_out" href="#" class="ui-btn ui-icon-minus ui-btn-icon-notext ui-corner-all" title="Zoom Out">Zoom-out</a>
                    <div id="tree-controls">
                        <a id="reset-tree" href="#" class="ui-btn ui-icon-refresh ui-btn-icon-notext ui-corner-all" title="Reset">Reset</a>
                    </div>
                </div>
                <div id="legend-container">
                    <div id="legend" data-role="collapsible" data-collapsed="false">
                        <h3 class="ui-mini">Legend</h3>
                        <div id="legend-items"></div>
                    </div>
                    <input type="text" data-type="search" placeholder="Search..." id="search-input">
                    <ul id="search-result" data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#search-input" data-inset="true"></ul>
                </div>
            </div>
            <div data-role="footer">
                <div id="schema-path" class="ui-content">
                    <a href="#permalink-popup" id="permalink" data-rel="popup">Select a Node</a>
                    <div data-role="popup" id="permalink-popup" class="ui-content" data-arrow="true">
                        <label for="sharelink">Share:</label>
                        <input type="text" id="sharelink" style="min-width:300px;" placeholder="Select a Node to create a permalink." value="" data-theme="a">
                    </div>
                </div>
            </div><!-- /footer -->
            <div data-display="push" data-role="panel" id="info-panel" data-swipe-close=false>
                <div data-role="header" data-theme="b" class="ui-mini">
                    <h1 id="info-title">Info</h1>
                </div>
                <div data-role="tabs" id="info-tabs">
                    <div data-role="navbar" id="info-tabs-navbar">
                        <ul>
                            <li>
                                <a data-ajax="false" href="#info-tab-def">Definition</a>

                            </li>
                            <li>
                                <a data-ajax="false" href="#info-tab-example">Example</a>

                            </li>
                            <li>
                                <a data-ajax="false" href="#info-tab-schema">Schema</a>

                            </li>
                        </ul>
                    </div>
                    <div class="ui-body-d ui-content info-tab" id="info-tab-def">
                        <h4>Type:</h4>
                        <p id="info-type">
                            Select a node to view the type.
                        </p>
                        <hr />
                        <h4>Definition:</h4>
                        <p id="info-definition">
                            Select a node to view the definition.
                        </p>
                        <hr />
                        <h4>Translation:</h4>
                        <p id="info-translation">
                            Select a node to view the translation.
                        </p>
                    </div>
                    <div class="ui-body-d ui-content info-tab"  id="info-tab-example">
                        <p>
                            Select a node to view the example.
                        </p>
                    </div>
                    <div class="ui-body-d ui-content info-tab"  id="info-tab-schema">
                        <p>
                            Select a node to view the JSON schema.
                        </p>
                    </div>
                </div>
            </div>
            <!-- <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="help-panel">
            <div data-role="header" data-theme="b">
            <h1 data-role="header">Help</h1>

            </div>
            </div> -->
        </div>

        <div data-role="page" id="validator-page"  data-title="JSON Validator">
            <div data-role="header" class="md-navbar">
                <h1>mdJSON Validator <span class="schema-version"></span></h1>
                <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
                    <a class="ui-btn md-flex-btn ui-icon-eye ui-btn-icon-left ui-corner-all" href="#viewer-page"  title="Go to Viewer">Viewer</a>
                </div>
                <a data-rel="popup" data-role="none" data-position-to="window" class="ui-btn-right main-logo" href="#popup-welcome"  title="Show Info"></a>
            </div>
            <div role="main" class="ui-content">
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a section">
                        <label for="textarea-json">JSON to Validate:</label>
                        <textarea cols="40" rows="15" name="textarea-json" id="textarea-json" placeholder="Enter your JSON or Drag-n-Drop a file here..."></textarea>
                        <a class="load-example" href="<!-- @if NODE_ENV!='PRODUCTION' -->bower_components/mdjson-<!-- @endif -->schemas/examples/minimum_example.json" data-target="textarea-json" data-prefetch="true">Load Example</a>
                    </div>
                    <div class="ui-block-b section">
                        <label for="file-upload">Upload File:</label>
                        <input id="file-upload" type="file" name="file" data-role=""/>
                        <fieldset data-role="controlgroup">
                            <legend>
                                Options:
                            </legend>
                            <input type="checkbox" name="checkbox-strict" id="checkbox-strict">
                            <label for="checkbox-strict">Strict</label>
                            <input type="checkbox" name="checkbox-stop" id="checkbox-stop">
                            <label for="checkbox-stop">Stop at First Error</label>
                        </fieldset>
                    </div>
                </div>
                <button id="button-validate" class="ui-btn ui-icon-check ui-btn-icon-bottom">
                    Validate!
                </button>
                <div id="validation-results" class="ui-responsive"></div>
            </div>
        </div>

        <div id="popup-error" data-history="false" data-theme="a" data-overlay-theme="b">
            <div data-role="header" data-theme="a">
                <h1>Error!</h1>
            </div>
            <p class="ui-content error-message">
                If you see this, something went wrong.
            </p>
        </div>

        <div id="popup-welcome" data-role="popup" data-history="false" data-theme="a" data-overlay-theme="b">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <div data-role="header" data-theme="b">
                <h1>JSON Schema Viewer</h1>
            </div>
            <div class="ui-content">
                <p>
                    JavaScript tool for visualizing json-schemas.
                </p>
                <h3> Built using: </h3>
                <ul>
                    <li>
                        <a href="http://d3js.org/">D3.js</a>
                    </li>
                    <li>
                        <a href="http://jquery.com/">jQuery</a>
                    </li>
                    <li>
                        <a href="http://jquerymobile.com/">jQuery Mobile</a>
                    </li>
                    <li>
                        <a href="http://geraintluff.github.io/tv4/">tv4</a>
                    </li>
                    <li>
                        <a href="http://bgrins.github.io/filereader.js/">FileReader.js</a>
                    </li>
                    <li>
                        <a href="https://highlightjs.org/">highlight.js</a>
                    </li>
                    <li>
                        <a href="https://github.com/alexeykuzmin/jsonpointer.js">jsonpointer.js</a>
                    </li>
                    <li>
                        <a href="https://github.com/mhulse/grunt-html-boiler">Grunt HTML Boiler</a>
                    </li>
                    <li>
                        <a href="https://github.com/medialize/URI.js">URI.js</a>
                    </li>
                </ul>
                <hr />
                <h3> Features: </h3>
                <ul>
                    <li>
                        <h4>Viewer</h4>
                        <p>
                            Interactive documentation tool for <a href="http://json-schema.org/">JSON schemas</a>.
                            Utilizes the D3.js library to build a collapsible tree from the supplied schema(s).
                        </p>
                    </li>
                    <li>
                        <h4>JSON Validator</h4>
                        <p>
                            A tool to validate a json object using the supplied schema.
                            Utilizes the tv4 library.
                        </p>
                    </li>
                </ul>
                <p>There's also a <a rel="external" href="./basic.html">basic example</a> without the jQuery Mobile interface elements.</p>
                <hr />
                <div id="welcome-footer">
                    <a href="<!-- @echo homepage -->" class="ui-btn ui-btn-inline ui-icon-github ui-btn-icon-left">This project's on GitHub!</a>
                </div>
            </div>
        </div>

        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="lib/preinit.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
        <!-- @if NODE_ENV!='PRODUCTION' -->
        <script>
          $.ajaxSetup({
            cache : false
          });
        </script>
        <script type='text/javascript' src="bower_components/tv4/tv4.js"></script>
        <script type='text/javascript' src="bower_components/uri.js/src/URI.js"></script>
        <!--<script type='text/javascript' src="lib/uri.js/jquery.URI.js"></script>-->
        <script type='text/javascript' src="lib/tv4.async-load-jquery.js"></script>
        <script type='text/javascript' src="bower_components/d3/d3.js"></script>
        <script type='text/javascript' src='bower_components/filereader.js/filereader.js'></script>
        <script type='text/javascript' src='bower_components/jsonpointer.js/src/jsonpointer.js'></script>
        <script type='text/javascript' src="bower_components/highlightjs/highlight.pack.js"></script>
        <script type='text/javascript' src="bower_components/jquery.scrollTo/jquery.scrollTo.js"></script>
        <script type='text/javascript' src="json-schema-viewer.js"></script>
        <script type='text/javascript'>
          //set schema location
          JSV.schema = '/bower_components/mdjson-schemas/schema/schema.json';
        </script>
        <script type='text/javascript' src="lib/example.js"></script>

        <!-- @endif -->
        <!-- @if NODE_ENV='PRODUCTION' -->
        <script type='text/javascript' src="json-schema-viewer.min.js"></script>
        <!-- @endif -->
    </body>
</html>
